<!doctype html>
<html>
  <head>
    <title>GitHub Cards</title>
    <link rel="stylesheet" href="site.css">
    <meta name="gc:base" content="./">
    <meta name="gc:client-id" content="a11a1bda412d928fb39a">
    <meta name="gc:client-secret" content="92b7cf30bc42c49d589a10372c3f9ff3bb310037">
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-21475122-5']);
      _gaq.push(['_setCustomVar', 1, 'Repo', 'lepture/github-cards']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        if (location.port || !/^http/.test(location.protocol)) {
          return;
        }
        ga.src = '//www.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <div class="unofficial">The unofficial</div>
        <h1>GitHub Cards</h1>
        <p>Card for your GitHub profile, card for your GitHub repositories.</p>
      </div>
      <div class="cases">
        <div class="case user">
          <h2>User Card</h2>
          <p>Show your GitHub profile.</p>
          <div class="github-card" data-user="lepture"></div>
        </div>
        <div class="case repo">
          <h2>Repo Card</h2>
          <p>Show your GitHub repository.</p>
          <div class="github-card" data-user="lepture" data-repo="github-cards" data-width=400></div>
        </div>
      </div>
      <div class="howto">
        <h2>How to Use</h2>
        <div class="howto-section">
          <div class="howto-theme">
            <label for="howto-select">Theme</label>
            <select id="howto-select" name="name">
              <option value="default">default</option>
              <option value="medium">medium</option>
            </select>
          </div>
          <input id="howto-input" type="text" placeholder="username or username/repo">
        </div>
        <div class="howto-section" id="howto-preview">
        </div>
        <div class="howto-section">
          <textarea id="howto-code"></textarea>
        </div>
      </div>
      <div class="footer">
        <p>Created by <a href="http://lepture.com/">Hsiaoming Yang</a> • Hosted on <a href="https://github.com/lepture/github-cards">GitHub</a></p>
      </div>
    </div>
    <script src="site.js"></script>
    <script src="widget.js"></script>
  </body>
</html>
